<!--suppress ALL -->
<template>
 <div @scroll="getScroll($event)" :style="{height:docHeight+'px',overflow:'auto'}" ref="main">
  <a-layout >
   <a-layout-header :style="{ position: 'fixed', zIndex: 999, width: '100%' }"
   :class="[top ? 'blue_header' : 'white_header']">
       <div :class="[top ? 'logo_white':'logo_blue']" >MQTT</div>
       <a-row type="flex" justify="end" >
           <a-col :class="{new_ant_col:!top}" :span="2">首页</a-col>
           <a-col :class="{new_ant_col:!top}" :span="2" @click="ToFiles">文档</a-col>
           <a-col :class="{new_ant_col:!top}" :span="2">FAQ</a-col>
           <a-col :class="{new_ant_col:!top}" :span="2">
               <router-link to="/register">
               <button :class="[top ? 'button_white':'button_blue','btn']" >注册</button>
              </router-link>
           </a-col>
       </a-row>
   </a-layout-header>
   <a-layout-content class="commet" :style="{height:curHeight+'px'}" >
       <a-row>
           <a-col :span="12">
               <div class="display_title">
                   <p>开始你的MQTT旅程</p>
               </div>
             <div class="code_pane">
                  <pre v-highlightjs="str2">
                       <code class="python"></code>
                  </pre>
             </div>
           </a-col>
           <a-col :span="12" >
               <div class="login_form">
                   <div class="login_title">
                       <p class="text-center">Get started for free</p>
                   </div>

                   <div class="login_form_nav">
                       <a-form id="components-form-demo-normal-login" :form="form" class="login-form" @submit="handleSubmit">
                           <a-form-item>
                               <a-input v-decorator="['username',  { rules: [{ required: true, message: '请输入用户名!' }] }, ]"
                                        placeholder="用户名 / 邮箱">
                                   <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
                               </a-input>
                           </a-form-item>
                           <a-form-item>
                               <a-input v-decorator="[  'password', { rules: [{ required: true, message: '请输入密码！' }] },  ]"
                                        type="password" placeholder="密码">
                                   <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
                               </a-input>
                           </a-form-item>
                           <a-form-item>
                               <a-checkbox v-decorator="['remember',  { valuePropName: 'checked', initialValue: true, }, ]">
                                   记住我
                               </a-checkbox>
                               <a class="login-form-forgot" >
                                <router-link class="login" :to="{ name: 'forget' }">忘记密码 ? </router-link>
                               </a>
                               <a-button type="primary" html-type="submit" class="login-form-button" :loading="state.loginBtn"
                                         :disabled="state.loginBtn">
                                   登 录
                               </a-button>
                           </a-form-item>
                       </a-form>
                   </div>
                   <div class="login_three_party">
                           <span>其他登录方式</span>
                           <a>
                               <a-icon class="item-icon" type="alipay-circle"></a-icon>
                           </a>
                           <a>
                               <a-icon class="item-icon" type="taobao-circle"></a-icon>
                           </a>
                           <a>
                               <a-icon class="item-icon" type="weibo-circle"></a-icon>
                           </a>
                   </div>
               </div>

           </a-col>
       </a-row>

   </a-layout-content>
   <a-layout-content class="commet_2" :style="{height:curHeight+'px'}">
       <div style="background-color: #eee; padding: 20px;margin-top:40px;min-width: 1200px">
           <div class="commet_2_title">
               <h3>物联网 MQTT 消息服务器</h3>
               <p>Internet of things mqtt message server</p>
           </div>
           <a-row type="flex" justify="space-around" style="margin-top: 40px">
               <a-col :span="4"/>
               <a-col :span="4">
                   <div class="info_card">
                       <div class="info_card_imgbox">
                           <img src="../assets/agreement.png" alt="#">
                       </div>
                       <div class="info_card_content">
                           <h3>完整的协议支持</h3>
                           <p>MQTT V3.1/V3.1.1及V5.0协议规范支持,MQTT/WebSocket/SSL支持</p>
                       </div>
                   </div>
               </a-col>
               <a-col :span="4">
                   <div class="info_card">
                       <div class="info_card_imgbox">
                           <img src="../assets/client.png" alt="#">
                       </div>
                       <div class="info_card_content">
                           <h3>海量连接</h3>
                           <p>海量物联网设备一站式连接，千万级并发连接,毫秒级消息时延</p>
                       </div>
                   </div>
               </a-col>
               <a-col :span="4"/>
           </a-row>
           <a-row type="flex" justify="space-around" style="margin-top: 20px">
               <a-col :span="4"/>
               <a-col :span="4">
                   <div class="info_card">
                       <div class="info_card_imgbox">
                           <img src="../assets/net.png" alt="#">
                       </div>
                       <div class="info_card_content">
                           <h3>全网络支持</h3>
                           <p>3G/4G/5G&NB-IoT&Wi-Fi&以太网 全网络支持</p>
                       </div>
                   </div>
               </a-col>
               <a-col :span="4">
                   <div class="info_card">
                       <div class="info_card_imgbox">
                           <img src="../assets/safety.png" alt="#">
                       </div>
                       <div class="info_card_content">
                           <h3>多重安全</h3>
                           <p>TLS/DTLS 多重网络安全，X.509 证书等多种身份认证。</p>
                       </div>
                   </div>
               </a-col>
               <a-col :span="4"/>
           </a-row>
       </div>


   </a-layout-content>
      <a-layout-content class="commet_3" :style="{height:curHeight+'px'}">
          <div class="gutter-example">
              <a-row :gutter="16">
                  <a-col class="gutter-row" :span="4">
                      <div class="gutter-box"></div>
                  </a-col>
                  <a-col class="gutter-row" :span="8">
                      <div class="gutter-box">
                          <img src="../assets/mobile.png" alt="">
                      </div>
                  </a-col>
                  <a-col class="gutter-row" :span="8">
                      <div class="gutter-title">
                          <h3>创建自己专属APP</h3>
                          <p>免费的AIoT开发工具，可实现产品智能化，移动通信产品调试
                              云端集成微服务构建自助化应用服务模块，跨品牌多品类互联互通助力打造产品生态及行业应用。
                          </p>
                      </div>
                      <div class="gutter-box">
                          <ul class="gutter_list">
                              <li><p>丰富的API接口，适用多种环境开发</p></li>
                              <li><p>详细的开发文档，节省开发周期</p></li>
                              <li><p>多语言的SDK，可二次开发</p></li>
                              <li><p>不同模板，灵活开发</p></li>
                              <li><p>多种加密方式保障数据安全</p></li>
                          </ul>
                      </div>
                  </a-col>
                  <a-col class="gutter-row" :span="4">
                      <div class="gutter-box"></div>
                  </a-col>
              </a-row>
          </div>
      </a-layout-content>
      <a-layout-footer style="min-width: 1200px">
          <div class="container">
              <div class="gutter-example">
                  <a-row :gutter="16">
                      <a-col class="gutter-row" :span="12">
                          <div class="gutter-box">
                              <h5>关于 MQTT</h5>
                              <p class="about">Magnis modipsae que voloratati andigen daepeditem quiate conecus aut labore.
                                  Laceaque quiae sitiorem rest non restibusaes maio es dem tumquam explabo.</p>
                               <div class="footer_list">
                                   <a href="#" class="item-icon"> <a-icon type="qq" /></a>
                                   <a href="#" class="item-icon"> <a-icon type="wechat" /></a>
                                   <a href="#" class="item-icon"><a-icon type="aliyun" /></a>
                                   <a href="#" class="item-icon"><a-icon type="google" /></a>
                                   <a href="#" class="item-icon"><a-icon type="weibo" /></a>
                               </div>
                          </div>
                      </a-col>
                      <a-col class="gutter-row" :span="6">
                          <div class="gutter-box list_item">
                              <h5>MQTT</h5>
                              <ul>
                                  <li><a href="#">关于</a></li>
                                  <li><a href="#">博客</a></li>
                                  <li></li>
                              </ul>
                          </div>
                      </a-col>
                      <a-col class="gutter-row" :span="6">
                          <div class="gutter-box">


                          </div>
                      </a-col>
                  </a-row>
              </div>
              <div> <p style="text-align: center;margin-top: 20px">© 2020 MQTT ,lovewithme.top (非商业用途) 冀ICP备19007578号</p></div>
          </div>

      </a-layout-footer>
  </a-layout>
 </div>
</template>

<script>
    import { mapActions } from 'vuex'
    export default {
        name: "login",
        data(){
            return{
                state: {
                    loginBtn: false,

                },
                curHeight:0,
                docHeight:0,
                top:true,
                str: "#轻量级物联网协议 — MQTT \n#支持支持10种语言编写客户端 Python Javascript ...\n#Python \n" +
                    "import paho.mqtt.client as mqtt \ndef on_connect(client, userdata, flags, rc):" +
                    "\n    print('Connected with result code:'+ str(rc)) \nclient = mqtt.Client()\nclient.on_connect = on_connect\n" +
                    "client.connect('127.0.0.1', 1883, 600)\n#javascript 客户端\nclient = new Paho.MQTT.Client(hostname, port, clientId); \n" +
                    "var options={ ... } \nclient.connect(options);\n......",
                str2:"",
                i: 0,
                timer: 0,
            }
        },beforeCreate() {
            this.form = this.$form.createForm(this, { name: 'normal_login' });
        },created(){
            this.curHeight=document.body.clientHeight;
            this.docHeight=document.body.scrollHeight;
        },
        mounted(){
            this.typing();

        },methods:{
            ...mapActions(['Login']),
            ToFiles(){
                this.$router.push({name:'Files'}).catch(err => {err})
            },
            getScroll(event) {
                // 滚动条距离底部的距离scrollBottom
               //console.log(event.target.scrollTop);
               this.top=(event.target.scrollTop <= 50);
              // console.log(this.top)
            },
            handleSubmit (e) {
                e.preventDefault()
                const {
                    form: { validateFields },
                    state,
                    Login
                } = this

                state.loginBtn = true

                validateFields({ force: true }, (err, values) => {
                    if (!err) {
                       // console.log('login form', values)
                        const loginParams = { ...values }

                        loginParams.username= values.username
                        loginParams.password = values.password

                        Login(loginParams)
                            .then(() => this.loginSuccess())
                            .catch(err => this.requestFailed(err))
                            .finally(() => {
                                state.loginBtn = false
                            })
                    } else {
                        setTimeout(() => {
                            state.loginBtn = false
                        }, 600)
                    }
                })
            },
            callback() {
               // console.log(key);
            },
            typing() {
                if (this.i <= this.str.length) {
                    this.str2 = this.str.slice(0, this.i++) + '_';
                    this.timer = setTimeout(() => {
                        this.typing();
                    }, 100);
                } else{
                    clearTimeout(this.timer)
                }

            },
            loginSuccess () {
                //console.log(res)
                this.$router.push({ "name": "Workplace"})
                // 延迟 1 秒显示欢迎信息
                setTimeout(() => {
                    this.$notification.success({
                        message: '欢迎',
                        description: '用户:'+this.$store.getters.name+`,欢迎回来!`
                    })
                }, 1000)
                this.isLoginError = false
            },
            requestFailed (err) {
                //console.log(err)
                this.isLoginError = true
                this.$notification['error']({
                    message: '登录失败',
                    description: ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试',
                    duration: 4
                })
            }

        },destroy:{

        }

    }
</script>

<style scoped>
    html,body{
        height: 100%;
        margin: 0;
        padding: 0;

    }
    *, *::before, *::after {
        box-sizing: border-box;
    }
    .hljs{
        margin-top: 40px;
        background-color: rgba(0,0,0,0.2);
        width: 540px;
        height: 320px;
    }
    .ant-layout-header{
        min-width: 1200px;
    }
   .white_header{
       background-color: rgba(255, 255, 255,0.8);
       box-shadow: 0px -4px 8px #2c3e50;
   }
   .blue_header{
       background-color: rgb(41,98,255);
   }
    .button_white{
        color: #FFFFFF;
        text-align: center;
    }
    .button_white:hover{
        cursor: pointer;
        background-color: #FFFFFF;
        color: rgb(41,98,255);

    }
    .btn {
        font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        min-width: 80px;
        font-weight: 600;
        text-transform: uppercase;
        transition: all .25s ease-out;
        user-select: none;
        border: 2px solid transparent;
        border-color: #FFFFFF;
        text-align: center;
        line-height: normal;
        background-color: rgb(41,98,255);
        border-radius: 4px;
        margin-top: 14px;
        width: 100%;
        height: 40px;
    }
    .button_blue{

        color: #FFFFFF;
        border-color: rgb(41,98,255);
    }
    .button_blue:hover{
        cursor: pointer;
    }
    .login_form{
        z-index: 1;
        width: 400px;
        height: 400px;
        margin: 100px auto;
        background-color: #FFFFFF;
    }
    .login_form .login_title{
        margin-top: 40px;
        height: 60px;
    }
    .login_form .login_form_nav{
        width: 320px;
        height: 240px;
        margin:26px 40px 20px 40px;
    }

    .login_form .login_title .text-center{
        position: absolute;
        margin-left: 90px;
        font-weight: bold;
        font-family: inherit;
        margin-top: 20px;
        color: #000000;
        font-size: 24px;
        text-align: center ;

    }
    .commet{
        width: 100%;
        min-width: 1200px;
        min-height: 600px;
       background-color: rgb(41,98,255);
    }

    .ant-col-2{
        color: #FFFFFF;
        font-size: 18px;
    }
    .ant-col-2:hover{
       cursor: pointer;
    }
    .new_ant_col{
       color: #2c3e50;
    }
    .logo_white{
        position: absolute;
        font-size: 1.25rem;
        font-weight: 700;
        text-transform: uppercase;
        color: #FFFFFF;
    }
    .logo_blue{
        position: absolute;
        font-size: 1.25rem;
        font-weight: 700;
        text-transform: uppercase;
        color: rgb(41,98,255);
    }

    #components-form-demo-normal-login .login-form {
        max-width: 300px;
    }
    #components-form-demo-normal-login .login-form-forgot {
        float: right;
    }
    #components-form-demo-normal-login .login-form-button {
        width: 100%;
    }
    .login_form .login_three_party{
        height:50px;
        width: 320px;
        text-align: left;
        margin: 10px auto;
        line-height: 22px;
    }
    .login_form .login_three_party .item-icon {
        font-size: 24px;
        color: rgba(0, 0, 0, 0.6);
        margin-left: 16px;
        vertical-align: middle;
        cursor: pointer;
        transition: color 0.3s;
    }
    .login_form .login_three_party .item-icon:hover {
        color: #1890ff;
    }
  .code_pane{
      width: 540px;
      height: 320px;
      margin: 10px auto;
  }
    .display_title{
        margin-top: 100px;
        height: 80px;
        width: 100%;
        z-index: 99;
        background-color: #1890ff;
    }
    .display_title p{
       padding: 8px;
        text-align: center;
        font-size: 3rem;
        font-weight: 300;
        line-height: 1.5;
        z-index: 1;
        color: #FFFFFF;
    }
    .commet_2 {
        position: relative;
        width: 100%;
        min-width: 1200px;
        background-color: #eee;
    }
    .commet_2_title{
        width: 100%;
        height: 80px;
    }
    .commet_2_title h3{
        font-size: 2.25rem;
        font-weight: 300;
        line-height: 1.2;
        text-align: center;
    }
    .commet_2_title p{
        text-align: center;
        font-size: 1.14rem;
        font-weight: 400;
    }
    .commet_2 .info_card{
        width:100%;
        height: 200px;
    }
    .commet_2 .info_card .info_card_imgbox{
       width: 80px;
        height: 80px;
        border-radius: 50%;
        background-color: #fff;
        margin: 0 auto;
    }
    .commet_2 .info_card .info_card_imgbox img{
        width: 40px;
        height: 40px;
        margin:20px;
    }
    .commet_2 .info_card .info_card_content{
        text-align: center;
    }
    .commet_2 .info_card .info_card_content h3{
        margin-top: 10px;
    }
    .commet_2 .info_card .info_card_content p{
       padding: 10px;
    }
    .commet_3{
        width: 100%;
        min-width: 1200px;
        background-color: #ffffff;
    }

    .commet_3 .gutter-example >>> .ant-row > div {
        background: transparent;
        border: 0;
    }
    .commet_3 .gutter-box {
        padding: 5px 0;
        height: 80%;
        padding: 20px;
    }
    .commet_3 .gutter-box img{
        position: relative;
        width: 80%;
        height: 80%;
        margin:20px auto;

    }
    .commet_3 .gutter-box ul.gutter_list {
        margin-top: 24px;
        margin-left: 10px;
        margin-bottom: 0;
        padding-left: 0;
        font-size: 17px;
        position: relative;


    }

    .commet_3 .gutter-box ul.gutter_list li {
        list-style-image: url("../assets/circle.png");
         margin: 10px;
        position: relative;
     }
    .gutter-title{
        position: relative;
        width: 100%;
        height: 160px;
        margin-top: 60px;
    }
    .gutter-title h3{
        font-size: 2.25rem;
        font-weight: 300;
        line-height: 1.5;
    }
    .gutter-title p{
        color: #adb5bd !important;
        font-size: 1.14rem;
        font-weight: 400;
        margin-top: 0;
        margin-bottom: 1rem
    }
    .commet_3 .gutter-box ul.gutter_list li p{
        position: absolute;
        margin-top: -10px;

    }
    .container {
        width: 100%;
        height: 360px;
        padding-right: 40px;
        padding-left: 40px;
        margin-right: auto;
        margin-left: auto;

    }
 .container h5{
     margin-bottom: 1rem;
     font-family: inherit;
     font-weight: 600;
     line-height: 1.5;
     color: #000000;
     display: block;
     font-size: 1.5em;

     font-weight: bold;
 }
    .container .about {
        padding-right:50px;
        color: rgba(0, 0, 0, 0.6);
    }
.footer_list {
   width: 240px;
    height: 40px;

}
    .footer_list .item-icon{
        font-size: 24px;
        margin: 10px;
    }
    .list_item li{
        list-style-type: none;
        padding-left: 0;
        margin-bottom: 1rem;

        text-align:center;
        margin-left: -40px;

    }
    .list_item h5{
        text-align: center;
    }
    .list_item li a:hover{
       color: #1890ff;
    }
.list_item li a{
    color: rgba(0, 0, 0, 0.6);
    transition: all 0.25s ease-out;
    font-size: 16px;

}

</style>
